
<template>
    <el-card shadow="never" class="border-1">
        <div id="HeatmapEcharts" style=" width: 100%; height: 300px; margin:auto;"></div>
    </el-card>
</template>
 
<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, reactive } from "vue";
import { getDashboardPublishArticleStatisticsInfo } from '@/api/admin/dashboard'

let myEcharts = echarts;
const year = new Date().getFullYear().toString()
console.log('year:' + year)
const myData = []

onMounted(() => {
    getDashboardPublishArticleStatisticsInfo().then((e) => {
        if (e.success) {
            let map = e.data
            for (let key in map) {
                myData.push([
                    key,
                    map[key]
                ]);
            }
            initChart();
        }
    })
});

onUnmounted(() => {
    myEcharts.dispose;
});

function initChart() {
    let chart = myEcharts.init(document.getElementById("HeatmapEcharts"), "purple-passion");
    chart.setOption({
        title: {
            top: 30,
            left: 'center',
            text: '博客发布图',
        },
        tooltip: {},
        visualMap: {
            min: 0,
            max: 10,
            type: 'piecewise',
            orient: 'horizontal',
            left: 'center',
            top: 65,
            //特定数据有相对应的数据
            pieces: [
                { value: "1", label: '1', color: '#a6e3e9' },
                { value: "2", label: '2', color: '#a8d8ea' },
                { value: "3", label: '3', color: '#71c9ce' },
                { value: "4", label: '4', color: '#F0E68C' },
                { value: "5", label: '5', color: '#FFDEAD' },
                { value: "6", label: '6', color: '#ffc8c8' },
                { value: "7", label: '7', color: '#ffcef3' },
                { value: "8", label: '8', color: '#f38181' },
                { value: "9", label: '9', color: '#fc5185' },
                // { value: "10", label: '10', color: '#FF6347' },
            ]
        },
        calendar: {
            range: year,
            top: 120,
            left: 30,
            right: 30,
            cellSize: ['auto', 23],
            itemStyle: {
                borderWidth: 0.5
            },
            yearLabel: { show: false }
        },
        series: {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: myData,
            // label: {
            //     show: true
            // },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },

    });
    //监听窗口宽度
    // window.onresize = function () {
    //     chart.resize();
    // };
    // 为窗口加上宽度变化事件，当宽高发生改变时，调用echarts的resize()方法，调整图表尺寸
    window.addEventListener('resize', function () {
        chart.resize();
    })
}

</script>
 
 